<template>
	<view>
		<view class="movie-boom">
			<view v-for="(item, index) in TAB_BARS" :key="index" class="movie-boom-item" @click="go(item.path)">
				<image
					:src="item.path == currentPath?item.icon.active:item.icon.inactive">
				</image>
				<view :class="{
					'boom-item-text': true,
					'hight-light-item':item.path == currentPath
				}">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		TAB_BARS
	} from "@/constants.js"
	export default {
		data() {
			return {
				TAB_BARS
			}
		},
		methods: {
			go(url) {
				uni.redirectTo({
					url
				});
			}
		},
		computed: {
			currentPath() {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const route = currentPage;
				return `/${currentPage.route}`;
			}
		}
	};
</script>

<style lang="less">
	.movie-boom {
		display: flex;
		align-items: center;
		padding-top: 16rpx;
		padding-bottom: 4rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;

		.movie-boom-item {
			width: 50%;
			text-align: center;

			image {
				width: 48rpx;
				height: 48rpx;
			}

			.boom-item-text {
				color: #a2a4aa;
				font-size: 20rpx;
			}

			.hight-light-item {
				color: #fe602b
			}
		}
	}
</style>